<template>
  <div class="box">
    <div class="header">
      <div class="top" v-show="flag">
        <span @click="toLogin">
          <van-cell
            title="hi！请登录"
            icon="https://img11.360buyimg.com/jdphoto/s120x120_jfs/t21160/90/706848746/2813/d1060df5/5b163ef9N4a3d7aa6.png"
            size="large"
          />
        </span>
      </div>
      <div class="bottom" v-show="!flag">
        <span @click="backLogin">
          <van-cell
            :title="name"
            icon="https://img11.360buyimg.com/jdphoto/s120x120_jfs/t21160/90/706848746/2813/d1060df5/5b163ef9N4a3d7aa6.png"
            size="large"
          />
        </span>
      </div>
    </div>
    <div class="main">
      <div class="main-Collec">
        <span @click="$router.push('/collection')">商品收藏</span>
        <span @click="$router.push('/shopcollection')">店铺收藏</span>
        <span>我的足迹</span>
      </div>
      <div class="main-grid">
        <van-grid>
          <van-grid-item icon="shop-o" text="待付款" />
          <van-grid-item icon="send-gift-o" text="待收货" />
          <van-grid-item icon="balance-o" text="退货/售后" />
          <van-grid-item icon="newspaper-o" text="查看订单" @click="getOrd" />
        </van-grid>
      </div>
      <div class="main-grid">
        <van-grid :column-num="5">
          <van-grid-item icon="cash-on-deliver" text="优惠卷" />
          <van-grid-item icon="balance-o" text="白条额度" />
          <van-grid-item icon="bulb-o" text="京豆" />
          <van-grid-item icon="cash-on-deliver" text="红包" />
          <van-grid-item icon="balance-list-o" text="全部资产" />
        </van-grid>
      </div>
      <div class="arrow">
        <div class="username" @click="setUsername">
          修改用户名
          <span class="iconOne"><van-icon name="arrow" size='.2rem'/></span>
        </div>
        <div class="username" @click="$router.push('/password')">
          修改密码
          <span class="iconTwo"><van-icon name="arrow" size='.2rem'/></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUser } from "../api/user";
import Vue from "vue";
import { Dialog, Cell, CellGroup, Icon } from "vant";
Vue.use(Dialog);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Icon);
export default {
  name: "My",
  components: {},
  data() {
    return {
      flag: true,
      name: "",
    };
  },
  methods: {
    toLogin() {
      this.$router.push("Login");
    },
    backLogin() {
      Dialog.confirm({
        message: "已登录，是否退出登录",
      })
        .then(() => {
          // on confirm
          localStorage.removeItem("token");
          this.$router.go(0);
        })
        .catch(() => {
          // on cancel
        });
    },
    getOrd() {
      this.$router.push("Orid");
    },
    setUsername() {
      this.$router.push("Username");
    },
  },
  mounted() {
    if (localStorage.getItem("token")) {
      this.flag = false;
    } else {
      this.flag = true;
    }
  },
  created() {
    //获取用户名
    getUser({ userid: localStorage.getItem("userid") }).then((res) => {
      console.log(res.data.data[0].username);
      this.name = res.data.data[0].username;
    });
  },
};
</script>

<style scoped>
.header {
  background-color: red;
}
.top {
  font-family: "楷体";
}
.main-Collec {
  height: 0.4rem;
  display: flex;
  justify-content: space-around;
  font-family: "楷体";
  padding-top: 0.15rem;
}
.main-grid {
  margin-bottom: 10px;
  font-family: "楷体";
}
.header span {
  display: inline-block;
  width: 3.75rem;
}
.username {
  background-color: #fff;
  height: 0.4rem;
  line-height: 0.4rem;
  padding-left: 0.1rem;
}
.bottom img {
  font-size: 0.35rem;
  margin-right: 5px;
}
::v-deep .van-cell__title {
  margin-top: 10px;
  font-size: 0.2rem;
}
.top img {
  font-size: 0.35rem;
  margin-right: 5px;
}
.arrow .iconOne {
  margin-left: 2.4rem;
}
.arrow .iconTwo {
  margin-left: 2.55rem;
}
</style>